import React, { useRef } from 'react';
import { Text, Box, Cylinder, Sphere, Plane, RoundedBox } from '@react-three/drei';
import * as THREE from 'three';

interface CommercialCafeEnvironmentProps {
  radius?: number;
}

export const CommercialCafeEnvironment: React.FC<CommercialCafeEnvironmentProps> = ({ 
  radius = 18 
}) => {
  const envRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0;

  // 高端材质配色
  const materials = {
    floor: '#8B4513',
    wall: '#F5F5DC',
    ceiling: '#FFFFFF',
    wood: '#A0522D',
    metal: '#708090',
    glass: '#E6F3FF',
    marble: '#F8F8FF',
    leather: '#8B0000',
    gold: '#FFD700'
  };

  return (
    <group ref={envRef}>
      {/* ========== 基础结构 ========== */}
      
      {/* 高级木质地板 - 条纹纹理 */}
      <Plane 
        args={[radius * 2, radius * 2]} 
        rotation={[-Math.PI / 2, 0, 0]}
        position={[0, GROUND_LEVEL, 0]}
        receiveShadow
      >
        <meshStandardMaterial 
          color={materials.floor}
          roughness={0.8}
          metalness={0.1}
        />
      </Plane>

      {/* 地板条纹装饰 */}
      {Array.from({ length: 20 }, (_, i) => (
        <Plane
          key={i}
          args={[radius * 2, 0.3]}
          rotation={[-Math.PI / 2, 0, 0]}
          position={[0, GROUND_LEVEL + 0.001, -radius + (i * radius * 2 / 20)]}
          receiveShadow
        >
          <meshStandardMaterial
            color={i % 2 === 0 ? '#A0522D' : '#8B4513'}
            roughness={0.9}
          />
        </Plane>
      ))}

      {/* 奢华天花板 */}
      <Plane 
        args={[radius * 2, radius * 2]} 
        rotation={[Math.PI / 2, 0, 0]}
        position={[0, 5, 0]}
        receiveShadow
      >
        <meshStandardMaterial 
          color={materials.ceiling}
          roughness={0.3}
          metalness={0.1}
        />
      </Plane>

      {/* 天花板装饰线条 */}
      {[
        { pos: [-radius * 0.7, 4.9, 0], size: [0.1, 0.1, radius * 2] },
        { pos: [radius * 0.7, 4.9, 0], size: [0.1, 0.1, radius * 2] },
        { pos: [0, 4.9, -radius * 0.7], size: [radius * 2, 0.1, 0.1] },
        { pos: [0, 4.9, radius * 0.7], size: [radius * 2, 0.1, 0.1] }
      ].map((line, i) => (
        <RoundedBox
          key={i}
          position={line.pos}
          args={line.size}
          radius={0.02}
          castShadow
        >
          <meshStandardMaterial color={materials.gold} metalness={0.8} roughness={0.2} />
        </RoundedBox>
      ))}

      {/* ========== 精美墙壁系统 ========== */}
      
      {/* 前墙 - 入口墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[0, 2.5, -radius]}
        receiveShadow
      >
        <meshStandardMaterial color={materials.wall} roughness={0.6} />
      </Plane>

      {/* 后墙 - 装饰墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[0, 2.5, radius]}
        rotation={[0, Math.PI, 0]}
        receiveShadow
      >
        <meshStandardMaterial color={materials.wall} roughness={0.6} />
      </Plane>

      {/* 左墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[-radius, 2.5, 0]}
        rotation={[0, Math.PI / 2, 0]}
        receiveShadow
      >
        <meshStandardMaterial color={materials.wall} roughness={0.6} />
      </Plane>

      {/* 右墙 */}
      <Plane 
        args={[radius * 2, 5]} 
        position={[radius, 2.5, 0]}
        rotation={[0, -Math.PI / 2, 0]}
        receiveShadow
      >
        <meshStandardMaterial color={materials.wall} roughness={0.6} />
      </Plane>

      {/* ========== 精美窗户系统 ========== */}
      
      {/* 大型全景窗户 */}
      {[-8, 0, 8].map((x, i) => (
        <group key={`window-${i}`}>
          {/* 窗框 - 深色实木 */}
          <RoundedBox
            position={[x, 3, -radius + 0.15]}
            args={[3, 2.5, 0.3]}
            radius={0.1}
            castShadow
          >
            <meshStandardMaterial color={materials.wood} roughness={0.7} />
          </RoundedBox>
          
          {/* 玻璃 - 高透明度 */}
          <RoundedBox
            position={[x, 3, -radius + 0.05]}
            args={[2.7, 2.2, 0.05]}
            radius={0.05}
          >
            <meshStandardMaterial 
              color={materials.glass}
              transparent 
              opacity={0.15}
              metalness={0.1}
              roughness={0.0}
            />
          </RoundedBox>
          
          {/* 窗户装饰条 */}
          <RoundedBox
            position={[x, 3, -radius + 0.08]}
            args={[0.1, 2.2, 0.02]}
            radius={0.01}
            castShadow
          >
            <meshStandardMaterial color={materials.wood} />
          </RoundedBox>
          <RoundedBox
            position={[x, 3, -radius + 0.08]}
            args={[2.7, 0.1, 0.02]}
            radius={0.01}
            castShadow
          >
            <meshStandardMaterial color={materials.wood} />
          </RoundedBox>
        </group>
      ))}

      {/* ========== 奢华咖啡吧台 ========== */}
      
      <group position={[0, GROUND_LEVEL, radius - 4]}>
        {/* 主吧台结构 - 大理石台面 */}
        <RoundedBox
          position={[0, 0.6, 0]}
          args={[14, 1.2, 2.5]}
          radius={0.1}
          castShadow
          receiveShadow
        >
          <meshStandardMaterial color={materials.wood} roughness={0.6} />
        </RoundedBox>

        {/* 大理石台面 */}
        <RoundedBox
          position={[0, 1.3, 0]}
          args={[14.5, 0.15, 2.7]}
          radius={0.05}
          castShadow
        >
          <meshStandardMaterial 
            color={materials.marble} 
            roughness={0.2} 
            metalness={0.3}
          />
        </RoundedBox>

        {/* 吧台前沿装饰 */}
        <RoundedBox
          position={[0, 1.0, 1.0]}
          args={[14, 0.2, 0.3]}
          radius={0.05}
          castShadow
        >
          <meshStandardMaterial color={materials.gold} metalness={0.8} roughness={0.2} />
        </RoundedBox>

        {/* 高端咖啡设备区域 */}
        <group position={[-4, 1.4, -0.5]}>
          {/* 意式咖啡机 - 不锈钢 */}
          <RoundedBox args={[1.5, 2, 1]} radius={0.1} castShadow>
            <meshStandardMaterial color={materials.metal} metalness={0.9} roughness={0.1} />
          </RoundedBox>
          
          {/* 蒸汽管道 */}
          <Cylinder position={[0.5, 1.2, 0.7]} args={[0.05, 0.05, 0.8]} rotation={[0, 0, Math.PI/4]} castShadow>
            <meshStandardMaterial color={materials.metal} metalness={0.9} />
          </Cylinder>
          
          {/* 操作面板 */}
          <RoundedBox position={[0, 0.5, 0.6]} args={[1.2, 0.8, 0.1]} radius={0.05} castShadow>
            <meshBasicMaterial color="#000000" />
          </RoundedBox>
          
          {/* LED指示灯 */}
          {Array.from({ length: 6 }, (_, i) => (
            <Sphere
              key={i}
              position={[-0.4 + i * 0.15, 0.5, 0.65]}
              args={[0.02]}
            >
              <meshBasicMaterial color={i % 2 === 0 ? "#00FF00" : "#FF0000"} />
            </Sphere>
          ))}
        </group>

        {/* 收银区域 */}
        <group position={[5, 1.4, 0]}>
          <RoundedBox args={[2, 1, 1.5]} radius={0.1} castShadow>
            <meshStandardMaterial color="#2F4F4F" metalness={0.7} roughness={0.3} />
          </RoundedBox>
          
          {/* 收银屏幕 */}
          <RoundedBox position={[0, 0.6, 0]} args={[1.2, 0.8, 0.1]} radius={0.05} castShadow>
            <meshBasicMaterial color="#87CEEB" />
          </RoundedBox>
          
          {/* 键盘 */}
          <RoundedBox position={[0, 0, 0.4]} args={[0.8, 0.4, 0.05]} radius={0.02} castShadow>
            <meshStandardMaterial color="#2F2F2F" />
          </RoundedBox>
        </group>

        {/* 酒瓶展示架 */}
        <group position={[0, 2.8, -1]}>
          <RoundedBox args={[12, 1.5, 0.3]} radius={0.05} castShadow>
            <meshStandardMaterial color={materials.wood} />
          </RoundedBox>
          
          {/* 展示瓶子 */}
          {Array.from({ length: 8 }, (_, i) => (
            <group key={i} position={[-5 + i * 1.4, -0.3, 0.2]}>
              <Cylinder args={[0.06, 0.06, 0.8]} castShadow>
                <meshStandardMaterial 
                  color={i % 3 === 0 ? "#8B4513" : i % 3 === 1 ? "#2F4F4F" : "#8B0000"} 
                  transparent 
                  opacity={0.8} 
                />
              </Cylinder>
              
              {/* 瓶盖 */}
              <Cylinder position={[0, 0.45, 0]} args={[0.08, 0.08, 0.1]} castShadow>
                <meshStandardMaterial color={materials.gold} metalness={0.9} />
              </Cylinder>
            </group>
          ))}
        </group>
      </group>

      {/* ========== 高档座位区域 ========== */}
      
      {/* 豪华卡座 */}
      {[
        { pos: [-12, 0, -8], rot: 0 },
        { pos: [-12, 0, 0], rot: 0 },
        { pos: [-12, 0, 8], rot: 0 },
        { pos: [12, 0, -8], rot: Math.PI },
        { pos: [12, 0, 0], rot: Math.PI },
        { pos: [12, 0, 8], rot: Math.PI }
      ].map((booth, i) => (
        <group key={`luxury-booth-${i}`} position={booth.pos} rotation={[0, booth.rot, 0]}>
          {/* 高靠背座椅 - 真皮质感 */}
          <RoundedBox 
            position={[0, 0.8, -1]} 
            args={[3.5, 1.6, 0.4]} 
            radius={0.1} 
            castShadow
            receiveShadow
          >
            <meshStandardMaterial color={materials.leather} roughness={0.4} metalness={0.1} />
          </RoundedBox>
          
          {/* 座椅坐垫 - 厚实舒适 */}
          <RoundedBox 
            position={[0, 0.3, -0.7]} 
            args={[3.5, 0.6, 0.8]} 
            radius={0.1} 
            castShadow
            receiveShadow
          >
            <meshStandardMaterial color={materials.leather} roughness={0.4} metalness={0.1} />
          </RoundedBox>
          
          {/* 座椅拉扣装饰 */}
          {Array.from({ length: 6 }, (_, j) => (
            <Sphere
              key={j}
              position={[-1.5 + j * 0.6, 0.8, -0.85]}
              args={[0.03]}
              castShadow
            >
              <meshStandardMaterial color={materials.gold} metalness={0.9} />
            </Sphere>
          ))}
          
          {/* 高档实木桌子 */}
          <RoundedBox 
            position={[0, 0.45, 0.5]} 
            args={[3, 0.1, 1.2]} 
            radius={0.05} 
            castShadow 
            receiveShadow
          >
            <meshStandardMaterial 
              color={materials.wood} 
              roughness={0.3} 
              metalness={0.2}
            />
          </RoundedBox>
          
          {/* 桌腿 - 雕刻装饰 */}
          {[
            [-1.2, -0.3], [1.2, -0.3], [-1.2, 0.9], [1.2, 0.9]
          ].map((legPos, legIndex) => (
            <Cylinder
              key={legIndex}
              position={[legPos[0], 0.225, legPos[1]]}
              args={[0.08, 0.06, 0.45]}
              castShadow
            >
              <meshStandardMaterial color={materials.wood} />
            </Cylinder>
          ))}
          
          {/* 桌面装饰 - 台灯 */}
          <group position={[0.8, 0.5, 0.5]}>
            <Cylinder args={[0.12, 0.08, 0.3]} castShadow>
              <meshStandardMaterial color={materials.gold} metalness={0.8} />
            </Cylinder>
            <Sphere position={[0, 0.25, 0]} args={[0.15]} castShadow>
              <meshStandardMaterial 
                color="#FFFACD" 
                transparent 
                opacity={0.7}
                emissive="#FFFACD"
                emissiveIntensity={0.2}
              />
            </Sphere>
          </group>
        </group>
      ))}

      {/* 精致圆桌区域 */}
      {[
        { pos: [-6, 0, -3] },
        { pos: [6, 0, -3] },
        { pos: [-6, 0, 3] },
        { pos: [6, 0, 3] },
        { pos: [0, 0, -8] },
        { pos: [0, 0, 0] }
      ].map((table, i) => (
        <group key={`luxury-table-${i}`} position={table.pos}>
          {/* 大理石桌面 */}
          <Cylinder
            position={[0, 0.45, 0]}
            args={[1, 1, 0.08]}
            castShadow
            receiveShadow
          >
            <meshStandardMaterial 
              color={materials.marble} 
              roughness={0.2} 
              metalness={0.3}
            />
          </Cylinder>
          
          {/* 装饰边缘 */}
          <Cylinder
            position={[0, 0.49, 0]}
            args={[1.05, 1.05, 0.02]}
            castShadow
          >
            <meshStandardMaterial color={materials.gold} metalness={0.9} />
          </Cylinder>
          
          {/* 桌腿 - 装饰性金属 */}
          <Cylinder
            position={[0, 0.225, 0]}
            args={[0.06, 0.08, 0.45]}
            castShadow
          >
            <meshStandardMaterial color={materials.gold} metalness={0.8} roughness={0.2} />
          </Cylinder>
          
          {/* 桌腿装饰环 */}
          {[0.15, 0.3].map((height, ringIndex) => (
            <Cylinder
              key={ringIndex}
              position={[0, height, 0]}
              args={[0.12, 0.12, 0.02]}
              castShadow
            >
              <meshStandardMaterial color={materials.gold} metalness={0.9} />
            </Cylinder>
          ))}

          {/* 高档椅子 */}
          {[0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2].map((angle, chairIndex) => {
            const chairX = Math.cos(angle) * 1.4;
            const chairZ = Math.sin(angle) * 1.4;
            
            return (
              <group 
                key={chairIndex} 
                position={[chairX, GROUND_LEVEL, chairZ]}
                rotation={[0, angle + Math.PI, 0]}
              >
                {/* 椅座 - 真皮软垫 */}
                <RoundedBox 
                  position={[0, 0.25, 0]} 
                  args={[0.5, 0.08, 0.5]} 
                  radius={0.05} 
                  castShadow
                  receiveShadow
                >
                  <meshStandardMaterial color={materials.leather} roughness={0.4} />
                </RoundedBox>
                
                {/* 椅背 - 高档设计 */}
                <RoundedBox 
                  position={[0, 0.6, -0.2]} 
                  args={[0.5, 0.7, 0.08]} 
                  radius={0.05} 
                  castShadow
                >
                  <meshStandardMaterial color={materials.leather} roughness={0.4} />
                </RoundedBox>
                
                {/* 椅腿 - 抛光金属 */}
                {[[-0.18, -0.18], [0.18, -0.18], [-0.18, 0.18], [0.18, 0.18]].map((legPos, legIndex) => (
                  <Cylinder
                    key={legIndex}
                    position={[legPos[0], 0.125, legPos[1]]}
                    args={[0.025, 0.025, 0.25]}
                    castShadow
                  >
                    <meshStandardMaterial color={materials.metal} metalness={0.9} roughness={0.1} />
                  </Cylinder>
                ))}
                
                {/* 扶手 */}
                <RoundedBox
                  position={[-0.25, 0.4, 0]}
                  args={[0.08, 0.08, 0.3]}
                  radius={0.02}
                  castShadow
                >
                  <meshStandardMaterial color={materials.wood} />
                </RoundedBox>
                <RoundedBox
                  position={[0.25, 0.4, 0]}
                  args={[0.08, 0.08, 0.3]}
                  radius={0.02}
                  castShadow
                >
                  <meshStandardMaterial color={materials.wood} />
                </RoundedBox>
              </group>
            );
          })}
        </group>
      ))}

      {/* ========== 豪华装饰元素 ========== */}
      
      {/* 水晶吊灯系统 */}
      {[
        { pos: [-6, 4.2, -6] },
        { pos: [6, 4.2, -6] },
        { pos: [-6, 4.2, 6] },
        { pos: [6, 4.2, 6] },
        { pos: [0, 4.2, 0] }
      ].map((light, i) => (
        <group key={`chandelier-${i}`} position={light.pos}>
          {/* 主灯体 */}
          <Cylinder args={[0.4, 0.3, 1.2]} castShadow>
            <meshStandardMaterial 
              color={materials.gold} 
              metalness={0.9} 
              roughness={0.1}
            />
          </Cylinder>
          
          {/* 水晶装饰 */}
          {Array.from({ length: 12 }, (_, j) => {
            const angle = (j * Math.PI * 2) / 12;
            return (
              <group
                key={j}
                position={[
                  Math.cos(angle) * 0.5,
                  -0.3,
                  Math.sin(angle) * 0.5
                ]}
              >
                <Cylinder args={[0.02, 0.01, 0.2]} castShadow>
                  <meshStandardMaterial color="#FFFFFF" transparent opacity={0.8} />
                </Cylinder>
                <Sphere position={[0, -0.15, 0]} args={[0.03]} castShadow>
                  <meshStandardMaterial 
                    color="#FFFFFF" 
                    transparent 
                    opacity={0.9}
                    metalness={0.3}
                    roughness={0.1}
                  />
                </Sphere>
              </group>
            );
          })}
          
          {/* 光源 */}
          <pointLight
            intensity={1.5}
            distance={12}
            color="#FFFACD"
            castShadow
            shadow-mapSize={[1024, 1024]}
          />
        </group>
      ))}

      {/* 艺术装饰画 */}
      {[
        { pos: [-radius + 0.1, 3, -6], rot: [0, Math.PI / 2, 0] },
        { pos: [-radius + 0.1, 3, 6], rot: [0, Math.PI / 2, 0] },
        { pos: [radius - 0.1, 3, -6], rot: [0, -Math.PI / 2, 0] },
        { pos: [radius - 0.1, 3, 6], rot: [0, -Math.PI / 2, 0] }
      ].map((painting, i) => (
        <group key={`artwork-${i}`} position={painting.pos} rotation={painting.rot}>
          {/* 画框 - 金色雕刻 */}
          <RoundedBox args={[2, 1.5, 0.15]} radius={0.05} castShadow>
            <meshStandardMaterial color={materials.gold} metalness={0.8} roughness={0.2} />
          </RoundedBox>
          
          {/* 画布 */}
          <Plane args={[1.6, 1.2]} position={[0, 0, 0.08]}>
            <meshStandardMaterial 
              color={i % 3 === 0 ? "#FF6347" : i % 3 === 1 ? "#4169E1" : "#32CD32"} 
              roughness={0.8}
            />
          </Plane>
          
          {/* 画框装饰 */}
          {[
            [-0.9, 0.7], [0.9, 0.7], [-0.9, -0.7], [0.9, -0.7]
          ].map((decorPos, decorIndex) => (
            <Sphere
              key={decorIndex}
              position={[decorPos[0], decorPos[1], 0.1]}
              args={[0.05]}
              castShadow
            >
              <meshStandardMaterial color={materials.gold} metalness={0.9} />
            </Sphere>
          ))}
        </group>
      ))}

      {/* 高端绿植装饰 */}
      {[
        { pos: [-15, 0, -12] },
        { pos: [15, 0, -12] },
        { pos: [-15, 0, 12] },
        { pos: [15, 0, 12] },
        { pos: [0, 0, -15] },
        { pos: [0, 0, 15] }
      ].map((plant, i) => (
        <group key={`luxury-plant-${i}`} position={plant.pos}>
          {/* 高档花盆 - 陶瓷质感 */}
          <Cylinder
            position={[0, 0.5, 0]}
            args={[0.5, 0.4, 1]}
            castShadow
            receiveShadow
          >
            <meshStandardMaterial 
              color="#F5F5DC" 
              roughness={0.3} 
              metalness={0.1}
            />
          </Cylinder>
          
          {/* 花盆装饰带 */}
          <Cylinder
            position={[0, 0.8, 0]}
            args={[0.52, 0.52, 0.1]}
            castShadow
          >
            <meshStandardMaterial color={materials.gold} metalness={0.9} />
          </Cylinder>
          
          {/* 植物 - 多层叶子 */}
          <Sphere
            position={[0, 1.3, 0]}
            args={[0.6, 16, 16]}
            castShadow
          >
            <meshStandardMaterial color="#228B22" roughness={0.8} />
          </Sphere>
          
          {/* 大叶子装饰 */}
          {Array.from({ length: 8 }, (_, j) => {
            const angle = (j * Math.PI * 2) / 8;
            return (
              <Sphere
                key={j}
                position={[
                  Math.cos(angle) * 0.7,
                  1.2 + Math.random() * 0.4,
                  Math.sin(angle) * 0.7
                ]}
                args={[0.15, 8, 8]}
                castShadow
              >
                <meshStandardMaterial color="#2E8B57" roughness={0.7} />
              </Sphere>
            );
          })}
        </group>
      ))}

      {/* 店铺招牌 - 发光设计 */}
      <group position={[0, 4.7, -radius + 0.3]}>
        <RoundedBox args={[8, 1.2, 0.3]} radius={0.1} castShadow>
          <meshStandardMaterial 
            color={materials.wood} 
            roughness={0.6}
          />
        </RoundedBox>
        
        {/* 发光文字背景 */}
        <RoundedBox 
          position={[0, 0, 0.16]} 
          args={[7.5, 1, 0.1]} 
          radius={0.05}
        >
          <meshStandardMaterial 
            color="#FFFACD"
            emissive="#FFFACD"
            emissiveIntensity={0.3}
          />
        </RoundedBox>
        
        <Text
          position={[0, 0, 0.22]}
          fontSize={0.4}
          color={materials.wood}
          anchorX="center"
          anchorY="middle"
          castShadow
        >
          奢华浪漫咖啡厅
        </Text>
      </group>

      {/* ========== 专业照明系统 ========== */}
      
      {/* 环境光 */}
      <ambientLight intensity={0.4} />
      
      {/* 主要方向光 */}
      <directionalLight 
        position={[10, 15, 10]} 
        intensity={1.2} 
        castShadow
        shadow-mapSize={[2048, 2048]}
        shadow-camera-far={50}
        shadow-camera-left={-25}
        shadow-camera-right={25}
        shadow-camera-top={25}
        shadow-camera-bottom={-25}
      />
      
      {/* 补充光源 */}
      <pointLight 
        position={[-10, 8, -10]} 
        intensity={0.8} 
        distance={20}
        color="#FFE4B5"
      />
      
      <pointLight 
        position={[10, 8, 10]} 
        intensity={0.8} 
        distance={20}
        color="#FFE4B5"
      />
      
      {/* 边界检测 - 无形墙壁 */}
      <Sphere args={[radius]} position={[0, 0, 0]}>
        <meshBasicMaterial 
          transparent 
          opacity={0}
          side={THREE.BackSide}
        />
      </Sphere>
    </group>
  );
};